<template>
  <div class="orderDetail">
    <PageContainer
      title="订单详情"
      :containerStyle="{
        background: '#F5F5F5'
      }" back no-tab>
      <div class="order-card">
        <div class="order-header">
          <ProductCardLandscape
            :img="item.customerInfo?.project_info?.[0]?.imageList?.[0]"
            :price="item.total"
            :title="item.ordeName"
            :orderType="Number(query.orderType)"></ProductCardLandscape>
        </div>
        <div class="order-info">
          <div class="label-value">
            <div class="label">实付款</div>
            <div class="value">{{ item.total - item.remainMoney }} {{ item.orderType === 1 ? '元' : '积分' }}</div>
          </div>
          <div class="label-value">
            <div class="label">订单号</div>
            <div class="value">{{ item.orderCode }}</div>
          </div>
          <div class="label-value">
            <div class="label">下单时间</div>
            <div class="value">{{ item.createdAt }}</div>
          </div>
          <div class="label-value">
            <div class="label">订单状态</div>
            <div class="value">待发货</div>
          </div>
        </div>
      </div>
      <div class="recommend-container">
        <RecommendList></RecommendList>
      </div>
    </PageContainer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import PageContainer from '@/components/PageContainer/index.vue'
import ProductCard from '@/components/ProductCard/index.vue'
import ProductCardLandscape from '@/components/ProductCardLandscape/index.vue'
import RecommendList from "@/components/RecommendList/index.vue";
import {useRouter} from '@/hooks/useRouter';
import { orderList } from '@/api'

const { getPageQuery } = useRouter();
let query = ref({})

const item = ref({})

const getDetail = async () => {
  try {
    const res = await orderList({ orderCode: query.orderCode })
    item.value = res.records?.[0] || {}
    console.log('订单详情------', item.value)
  } catch(error) {
    
  }
}

onMounted(() => {
  query.value = getPageQuery()
  console.log('订单详情-----', query)
	if (query.value.orderCode) {
		getDetail()
	}
})
</script>

<style lang="less" scoped>
.orderDetail {
  .order-card {
    background: #fff;
    margin: 8px;
    .order-header {
      // padding: 8px;
    }

    .order-info {
      border-top: 1px dashed #EEEEEE;
      padding: 16px;
      .label-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:not(:last-child) {
          margin-bottom: 16px;
        }
        .value {
          color: #939393;
          font-size: 14px;
        }
      }
    }
  }
  .recommend-container {
    background: #fff;
  }
}
</style>
